Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
Nice work! Your project lets me know that you have a goo understanding of React and useState!
| const calculateTotalLikeCount = (chat) => { | ||
| return chat.reduce((total, chat) => { | ||
| return total + (chat.liked ? 1 : 0); | ||
| }, 0); | ||
| }; |
| const localSender = messages[0].sender; | ||
| let remoteSender = 'Unknown'; | ||
|
|
||
| for (const message of messages) { | ||
| if (message.sender !== localSender) { | ||
| remoteSender = message.sender; | ||
| break; // Stop once other sender is found | ||
| } | ||
| } |
There was a problem hiding this comment.
Nice this handles cases of double texting!
| const handleLikeButtom = (id) => { | ||
| setChat(chat => { | ||
| return chat.map(chat => { | ||
| if (chat.id === id) { | ||
| return { ...chat, liked: !chat.liked }; | ||
| } else { | ||
| return chat; | ||
| } | ||
| }); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
No notes on this! Shows me that you have a great understanding of lifting up state!
|
|
||
|
|
||
| const App =() => { | ||
| const [chat, setChat] = useState(messages); |
There was a problem hiding this comment.
Maybe we could change this from chat to chats since it is multiple chat messages instead of one?
| <ChatLog | ||
| entries={chat} | ||
| onLiked={handleLikeButtom} | ||
| localSender={localSender} | ||
| likes={totalLikes} />} |
There was a problem hiding this comment.
Does totalLikes actually need to be passed? We are only using it in line 44.
| const ChatLog = (props) => { | ||
| const chatentrycomponents = props.entries.map((entries, index) => { | ||
| return ( | ||
| <ul key={index}> |
There was a problem hiding this comment.
Since we have the ids of entries we could actually use that. We want to avoid using the indexes.
|
|
||
|
|
||
| const ChatLog = (props) => { | ||
| const chatentrycomponents = props.entries.map((entries, index) => { |
There was a problem hiding this comment.
We could maybe name this entry instead of entries since it only a single entry we will be looking at each iteration.
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| }) | ||
| ).isRequired, | ||
|
|
||
| onLiked: PropTypes.func.isRequired, | ||
| localSender: PropTypes.string.isRequired, |
There was a problem hiding this comment.
I see that the tests are saying that some of the props are undefined but that isn't the case. I'm not entirely sure why.
| const likeButtonCliked = () => { | ||
| props.onLiked(props.id); | ||
| }; |
There was a problem hiding this comment.
The button function could also be implemented like so:
<button className='like' onClick={() => likeButtonClicked(id)}>{liked ? '❤️': '🤍'}</button>| const heartColor = props.liked ? '❤️' : '🤍'; | ||
| const messageClass = props.sender === props.localSender ? 'local' : 'remote'; |
2 participants
No description provided.